/* Welcome to Compass. Use this file to define print styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
@import "compass/CSS3";
@import "compass/typography";
@import "_mixin.scss";
@import "_keyframes.scss";
$font-family:"Microsoft YaHei";
$color:#444;
body{
  position: relative;
.mod{
  width:100%;
  height:5970px;
  background-color:rgba(0,0,0,0.8);
  position:absolute;
  top:0;
  left:0;
  z-index:100;
  .content{
    position:relative;
    top:4400px;
    margin:0 auto;
    width:600px;
    background-color:white;
    z-index:101;
    .content-head{
      padding:20px;
      border:1px solid #e6e6e6;
      color:$color;
      &:after{
        content:"";
        display: block;
        clear:both;
      }
      span:first-child{
        float: left;
        font:normal 20px $font-family;
        margin-left:20px;
      }
      span:last-child{
        cursor:pointer;
        float:right;
        display: inline-block;
        width:20px;
        height:20px;
        background:url("../img/close.png") no-repeat;
        width:20px;
        height:20px;
      }
    }//.content-head
    .content-body{
      padding:60px 78px;
      .content-body-left{
        float: left;
        margin-right:50px;
        >div{
          @include store();
        }
      }//.content-body-left
    }//.content-body
  }//.content
}//.modal
#header{
	height:650px;
	width:100%;
	overflow:hidden;
	position: relative;
    #bg{  
      .hidden{
        display:none; 
      }   	
    	.select{
    		position: relative;
        //display:block;
      }
    	.bg1{
        @include bg();
  			margin-top:-350px;  			
    	}    	 	
    	.bg2{
        @include bg();
    		margin-top:-123.5px;
    	}    
    	.bg3{
        @include bg();
    		margin-top:-91.5px;
    	}
    	.bg4{
        @include bg();
    		margin-top:-125px;
    	}
    	.bg5{
        @include bg();
    		margin-top:-184.5px;
    	}
    	.bg6{
        @include bg();
    		margin-top:-122px;
    	}
    	.bg7{
        @include bg();
  			position: absolute;  
    	}
    }
    //.bg结束
  .wrapper{
  	width:586px;
  	margin:100px auto;
  	text-align:center;
  	>img{
  		margin-bottom:50px
  	}//img(logo)
    .notice{
    	width:584px;
    	.lis{
    		height:55px;
        font-family:$font-family;
        .selected{
            background-color:white;
            color:#444;
            &:hover{
              color:#444;
            }
          }
        li{
          float:left;
          width:194px;
          height:55px;
          background-color:rgba(0,0,0,0.3);
          font-size:20px;
          color:rgba(255,255,255,0.5);
          &:hover{
            color:white;
          }
        }
    		#one{
          float: left;
          width:194px;
          >div{
              display:inline-block;
              &:first-child{
                  width:80px;
                  float:left;
                  height:32px;
                  line-height:32px;
                  margin-top:10px;
                  margin-bottom:10px;
                  border-right:1px solid rgba(0,0,0,0.2);

              }
              &:nth-child(2){
                 float: left;
                 width:65px; 
                 font-size:14px;
                 margin-top:10px;
                 padding-left:5px;                      
                 line-height:14px;
              }
              &:last-child{
                margin-top:14px;
              }
          }
        }//#one
        #two{
          border-left:1px solid rgba(17,17,17,0.3);
          border-right:1px solid rgba(17,17,17,0.3);
          line-height:55px;
        } 
        #three{
          line-height:55px;
        }
    	}//.lis
      #divs{
        background-color:white;
        padding:30px;
        .hid{
          display:none;
        }
        .test{
          display:block;
        }
        ul:first-child{
          .registe-left{
            float: left;
            div{
              width:298px;
              border:1px solid #d7d7d7;
              height:38px;
              input{
                width:274px;
                height:22px;
                padding:8px 12px;
                line-height:22px;
                border:none;
                font:500 14px $font-family;
              }
              a{
                @include mya();
                width:300px;
                height:32px;
                font:500 18px $font-family;
                padding-top:8px;
              }
              &:nth-child(2){
                margin-top:-1px;
              }
              &:nth-child(3){
                margin-top:-1px;
                margin-bottom:15px;
                input{
                  width:100px;
                  float: left;
                }//input
                p{
                  display: inline-block;
                  float: right;
                  height:34px;
                  width:80px;
                  margin:2px;
                  img{
                    height:34px;
                    width:80px;
                  }
                }//p
              }//nth-child(3)第三个div
              &:last-child{
                border:none;
                height:40px;
                width:300px;
                background:url("../img/green1.png") no-repeat;
                &:hover{
                  background:url('../img/green2.png') left top no-repeat;
                }
              }//last-child结束，第四个div
            }//所有的div
          }//.registe-left
          .registe-right{
            position: relative;
            float:right;
            span{
              &:first-of-type{
                position: absolute;
                width:1px;
                height:90px;
                background-color:#e7e7e7;
                left:-30px;
              }
              &:nth-of-type(2){
                display: inline-block;
                line-height:20px;
                width:20px;
                height:20px;
                background-color:white;
                position: absolute;
                top:40px;
                left:-38px;
                font-size:13px;
                z-index:10px;
                color:#aaa;
              }
            }//span
            div{
              margin-bottom:10px;
              &:first-of-type{
                a{
                  background:url("../img/xinlang1.png") no-repeat;
                   padding-left:54px;
                   &:hover{
                    background:url("../img/xinlang2.png") no-repeat;
                   }
                }
              }
               &:nth-of-type(2){
                a{
                  background:url("../img/qq1.png") no-repeat;
                   padding-left:45px;
                   &:hover{
                    background:url("../img/qq2.png") no-repeat;
                   }
                }
              }
               &:nth-of-type(3){
                a{
                   background:url("../img/weixin1.png") no-repeat;
                   padding-left:40px;
                   &:hover{
                     background:url("../img/weixin2.png") no-repeat;
                   }
                }
              }
              a{
                @include border-radius(2px);
                @include box-sizing(border-box);
                display: inline-block;
                width:160px;
                height:40px;
                font: 500 14px $font-family;
                @include mya();
                line-height:40px;
              }
            }//div
          }//.regist-right
        }//fist-child
        ul:nth-child(2){
          .loading-left{
            float: left;
            >input{
                border:1px solid #d7d7d7;
                display:block;
                width:266px;
                height:22px;
                font:normal 14px $font-family;
                padding:8px 16px;
                @include box-sizing(content-box);
                &:nth-child(2){
                  margin-top:-1px;
                  margin-bottom:12px;
                }
            }//input（邮箱、密码）
            >div:first-of-type{
              background:url("../img/green1.png") no-repeat; 
              margin-bottom:12px;  
              &:hover{
                background:url("../img/green2.png") no-repeat; 
              }          
              >a{
                display: inline-block;
                width:282px;
                height:40px;
                padding:8px;
                font:normal 18px $font-family;
                text-decoration:none;
                color:white;
              }
            }//点击登陆
            .loading-left-bottom{
              color:#666;
              font-size:14px;
              >div:first-child{
                width:21px;
                height:21px;
                margin-top:0px;
                margin-right:5px;
                float: left; 
                position: relative;
                input{
                  cursor:pointer;
                  opacity: 0;
                }
                label{
                  position: absolute;
                  width: 21px;
                  height: 21px;
                  top: 0;
                  left: 0;
                  background:url("../img/notcheckbox.png") no-repeat;
                  opacity: 0.2;
                  &:after{
                    content:"";
                    width:21px;
                    height:21px;
                    background:url("../img/onckeckbox.png") no-repeat;
                    opacity: 0;
                    position: absolute;
                    top:0;
                    left:0px;
                  }
                }
                input:checked + label:after {
                   opacity: 1;
                }
              }//第一个div结束  
              >span{
                vertical-align:top;
                float: left;
              }//第二个span结束
              >div:nth-child(3){
                float: right;
                >span{
                  margin-left:5px;
                  margin-right:5px;
                }
                a{
                  @include mya();
                  color:#666;
                }
              }//第三个div
            }//.loading-left-bottom
          }//.loading-left
          .loading-right{
            position: relative;
            float:right;
            span{
              &:first-of-type{
                position: absolute;
                width:1px;
                height:90px;
                background-color:#e7e7e7;
                left:-30px;
              }
              &:nth-of-type(2){
                display: inline-block;
                line-height:20px;
                width:20px;
                height:20px;
                background-color:white;
                position: absolute;
                top:40px;
                left:-38px;
                font-size:13px;
                z-index:10px;
                color:#aaa;
              }
            }//span
            div{
              margin-bottom:10px;
              &:first-of-type{
                a{
                  background:url("../img/xinlang1.png") no-repeat;
                   padding-left:54px;
                   &:hover{
                    background:url("../img/xinlang2.png") no-repeat;
                   }
                }
              }
               &:nth-of-type(2){
                a{
                  background:url("../img/qq1.png") no-repeat;
                   padding-left:45px;
                   &:hover{
                    background:url("../img/qq2.png") no-repeat;
                   }
                }
              }
               &:nth-of-type(3){
                a{
                   background:url("../img/weixin1.png") no-repeat;
                   padding-left:40px;
                   &:hover{
                     background:url("../img/weixin2.png") no-repeat;
                   }
                }
              }
              a{
                @include border-radius(2px);
                @include box-sizing(border-box);
                display: inline-block;
                width:160px;
                height:40px;
                font: 500 14px $font-family;
                @include mya();
                line-height:40px;
              }
            }//div
          }//.loading-right
        }//nth-child(2)
        ul:last-child{
          .download-left{
            float: left;
            margin-left:40px;
            margin-right:20px;
            >div{
              @include store();
            }
          }//.download-left
        }
          &:after{
            content:"";
            display:block;
            clear:both;
          }
        }
      }//#divs
    }//.notice
  }//.wrapper
  #bottom{
     position:absolute;
     bottom:20px;
     right:20px;   
    #dir{
     	float:right;
     	>#dir-left{
     		display:inline-block;
     		width:18px;
     		height:18px;
     		background:url("../img/left.png") no-repeat;
     		background-size: 100% 100%;
     		margin-left:10px;
     		margin-bottom:-2px;
     		&:hover{
   				background:url("../img/whiteleft.png") no-repeat;
   		    background-size: 100% 100%;
     		}
     	}//.left
   		>#dir-right{
     		display:inline-block;	
     		width:18px;
     		height:18px;
     		background:url("../img/right.png") no-repeat;
     		background-size: 100% 100%;
     		margin-bottom:-2px;
     		&:hover{
     				background:url("../img/whiteright.png") no-repeat;
     		    background-size: 100% 100%;
     		}
   	  }//.right
    }//.dir
    #person{
      display: inline-block;
      .hide{
        display:none;
      }
      .on{
     		float:right;
        >span{
        	color:#ddd;
        	font-size:14px;
        	text-shadow:-1px 1px 1px rgba(0, 0, 0, 0.6);
          &:hover{
            color:white;
          }
        }
        >b{
        	color:#ddd;
        	font-size:14px;
        	text-shadow:-1px 1px 1px rgba(0, 0, 0, 0.6);
          &:hover{
            color:white;
          }
        }
     		&:hover{
     			color:white;
     		}
      }//.on
    }//person
  //}  //.bottom
}//#header结束 
#main-body{
  .record{
    .wrap{
      width:928px;
      margin:0 auto;
      color:$color;
      >p:first-child{
        font:normal 44px $font-family;
        padding-top:72px;
        padding-bottom:15px;
        text-align:center;
      }//大标题
      >p:nth-child(2){
        width:730px;
        font:normal 18px $font-family;
        margin:0 auto;
        line-height:36px;
        text-align:center;
      }//摘要
      >div:nth-child(3){
        padding-top:60px;
        padding-bottom:60px;
      }//中间图片
      >div:nth-child(4){
        &:after{
          content:"";
          display:block;
          clear:both;
        }
        .record-one-left{
          float: left;
          padding-left:15px;
          @include icon();
        }//.record-one-left
        .record-one-right{
          float: right;
          padding-right:15px;
          @include icon();
        }
      }//div:nth-child(4),即第一排的icon
      >div:nth-child(5){
        &:after{
          content:"";
          display:block;
          clear:both;
        }
        .record-two-left{
          float: left;
          padding-left:15px;
          @include icon();
        }//.record-one-left
        .record-two-right{
          float: right;
          padding-right:15px;
          @include icon();
        }
      }//div:nth-child(5),即第二排的icon
    }//.wrap
  }//.record
  .hobby{
    background-color:#f7f7f7;
    color:$color;
    >p:first-child{
      font:normal 44px $font-family;
      padding-top:72px;
      padding-bottom:15px;
      text-align:center;
    }
    >p:nth-child(2){
      width:870px;
      font:normal 18px $font-family;
      margin:0 auto;
      line-height:36px;
      text-align:center;
    }
    >div:first-of-type{
      padding-top:60px;
      padding-bottom:60px;
      >img{
        margin:0 auto;
      }
    }
    >div:nth-of-type(2){
      width:928px;
      margin:0 auto;
       &:after{
          content:"";
          display:block;
          clear:both;
        }
      .hobby-left{
        float: left;
        padding-left:15px;
        @include icon();
      }
      .hobby-right{
        float: right;
        padding-right:15px;
        @include icon();
      }
    }
  }//.hobby
  .homepage{
    color:$color;
    p:first-child{
       font:normal 44px $font-family;
        padding-top:72px;
        padding-bottom:15px;
        text-align:center;
    }//标题
    p:nth-child(2){
      width:870px;
      font:normal 18px $font-family;
      margin:0 auto;
      line-height:36px;
      text-align:center;
    }//第二块p摘要
    div:nth-child(3){
      width:100%;
      height:750px;
      margin:50px 0;
      position: relative;
      >div{
        width:450px;
        height:260px;
        position: absolute;
        &:first-child{
          top:10px;
          left:40px;
          @include animation-img();
          @include animation(one 4s linear infinite alternate);
        }
        &:nth-child(2){
          @include animation-img();
          @include animation(two 4s linear infinite alternate);
        }
        &:nth-child(3){
          @include animation-img();
          @include animation(three 4s linear infinite alternate);
        }
         &:nth-child(4){
          @include animation-img();
          @include animation(four 4s linear infinite alternate);
        }
        &:nth-child(5){
          @include animation-img();
          @include animation(five 4s linear infinite alternate);
        }
        &:nth-child(6){
          @include animation-img();
          @include animation(six 4s linear infinite alternate);
        }
      }     
    }//第三块div结束，图片
  }//.homepage结束
  .mobile{
    background-color:#f7f7f7;
    color:$color;
    text-align:center;
    position: relative;
    >p:first-child{
      font:normal 44px $font-family;
      padding-top:72px;
      padding-bottom:15px;
    }
    >p:nth-child(2){
      width:870px;
      font:normal 18px $font-family;
      margin:0 auto;
      line-height:36px;
    }   
    a{
      cursor:pointer;
      @include mya();
      color:#5a8dcd;
      padding-top:10px;
      font:400 18px $font-family;
    }  
    >div:first-of-type{
      padding-top:60px;
      padding-bottom:60px;
      width:100%;
      overflow:hidden;
      text-align:center;
      height:635px;
      img{
        position: absolute;
        @include animation(mobile 15s linear 1 normal forwards);
      } 
    }
    >div:nth-of-type(2){
      width:928px;
      margin:0 auto;
       &:after{
          content:"";
          display:block;
          clear:both;
        }
      .mobile-left{
        float: left;
        padding-left:15px;
        @include icon();
      }
      .mobile-right{
        float: right;
        padding-right:15px;
        @include icon();
      }
    }
  }//.mobile
  .manner{
    text-align:center;
    p:first-child{
      padding-top:70px;
      padding-bottom:40px;
      font:normal 44px $font-family;
    }//第一块p结束
    >div:nth-child(2){
      width:230px;
      margin:0 auto;
      font:normal 18px $font-family;
      color:#777;
      height:40px;
      >span:first-child{
        float: left;
        display: inline-block;
        width:40px;
        height:40px;
        background:url("../img/song-white.png") no-repeat;
        background-size:100% 100%;
      }
      >span:nth-child(2){
        float: right;
        line-height:40px;
      }
    }//第二块div结束
    >div:nth-child(3){
      padding-top:25px;
      padding-bottom:80px;
      font:normal 18px $font-family;
      >a{
        @include mya();
        width:200px;
        height:50px;
        line-height:50px;
        @include box-sizing(border-box);
        &:first-child{
          background:url("../img/youxiang-big1.png") no-repeat; 
          padding-left:50px; 
          &:hover{
            background: url('../img/youxiang-big2.png') left top no-repeat;
          }
        }
        &:nth-child(2){
          background:url('../img/xinlang-big1.png') left top no-repeat;
          padding-left:50px;
           &:hover{
            background:url('../img/xinlang-big2.png') left top no-repeat;
          }
        }
        &:nth-child(3){
          background:url('../img/qq-big1.png') left top no-repeat;
          padding-left:50px;
          &:hover{
            background:url('../img/qq-big2.png') left top no-repeat;
          }
        }
        &:nth-child(4){
          background:url('../img/youxiang-big1.png') left top no-repeat;
          padding-left:50px;
          &:hover{
            background:url('../img/youxiang-big2.png') left top no-repeat;
          }
        }
      }//a标签结束
    }//第三块div结束
  }//.manner
}//#mainbody
#footer{
  padding:30px 0;
  background-color:#f7f7f7;
  font:normal 12px $font-family;
  color:#74808b;
  >div{
    width:910px;
    margin:0 auto;
    >a{
      @include mya();
      color:#74808b;
    }
    >span:first-of-type{
      margin:0 8px 0 40px;
    }
    >div{
       display: inline-block;
       >span{
        display: inline-block;
        width:14px;
        height:14px;
        background:url('../img/icon-police.png') left top no-repeat;
        background-size:100% 100%;
       }
       >a{
        @include mya();
        color:#74808b;
        margin-right:16px;
       }
    }
  }
}//footer
.flash{
    position: fixed;
    z-index:90px;
    bottom:0px;
    padding:25px 0;
    position: relative;
    >span:first-child{
      position: absolute;
      width:100%;
      height:32px;
      top:-32px;
      background:url('../img/shadow.png') left top no-repeat;
    }
    .wrap{
      width:910px;
      margin:0 auto;
      &:after{
        content:"";
        display: block;
        clear:both;
      }
      .flash-left{
        float: left;
        font:normal 18px $font-family;
        span:first-child{
          display: inline-block;
          width:40px;
          height:40px;
          background:url('../img/song-white.png') left top no-repeat;
          background-size:100% 100%;
          vertical-align:middle;
        }
        span:nth-child(2){
          color:#777;
        }
      }
      .flash-right{
        font:normal 16px $font-family;
        float: right;
        a{
          text-align:center;
          @include mya();
          width:160px;
          height:40px;
          padding-left:40px;
          line-height:40px; @include box-sizing(border-box);
          &:first-child{
            background:url("../img/weixin1.png") no-repeat; 
            padding-left:40px; 
            &:hover{
              background: url('../img/weixin2.png') left top no-repeat;
            }
          }
          &:nth-child(2){
            background:url('../img/xinlang1.png') left top no-repeat;
            padding-left:40px;
             &:hover{
              background:url('../img/xinlang2.png') left top no-repeat;
            }
          }
          &:nth-child(3){
            background:url('../img/qq1.png') left top no-repeat;
            padding-left:40px;
            &:hover{
              background:url('../img/qq2.png') left top no-repeat;
            }
          }
          &:nth-child(4){
            background:url('../img/weixin1.png') left top no-repeat;
            padding-left:40px;
            &:hover{
              background:url('../img/weixin2.png') left top no-repeat;
            }
          }
        }
      }
    }//.wrap
  }//.flash
}//body